<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" layout:decorate="~{layout}">
<head>
    <title>Spring Boot管理后台</title>
    <style type="text/css">
        table {
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;

        }

        table td, table th {
            width: 150px;
            border: 1px solid #cad9ea;
            color: #666;
            vertical-align: middle;
        }

        table thead th {
            background-color: #CCE8EB;
            width: 100px;
        }

        table tr:nth-child(odd) {
            background: #fff;
        }

        table tr:nth-child(even) {
            background: #F5FAFA;
        }
    </style>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: Arial, helvetica, "Microsoft Yahei", sans-serif;;
            font-size: 16px;
        }

        body {
            overflow: hidden;
        / / 隐藏滚动条
        }

        h1 {
            color: #fff;
            font-size: 35px;
            font-weight: bold;
            margin: 80px auto 50px -25px;
            text-align: center;
            text-shadow: 0 1px 1px #555;
        }

        .box {
            width: 390px;
            height: 320px;

            border: solid 1px #ddd;
            border-radius: 5px;
            background: #FFF;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -195px;
            margin-top: -160px; /*注意处理浏览器圆角的兼容  */
            -webkit-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .3);
            box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .3);
        }

        .box h2 {
            font-weight: normal;
            color: #666;
            font-size: 16px;
            line-height: 46px;
            height: 46px;
            overflow: hidden;
            text-align: center;
            border-bottom: solid 1px #ddd;
            background: #f7f7f7;
        }

        .input_box {
            width: 350px;
            padding-bottom: 15px;
            margin: 0 auto;
            overflow: hidden;
        }

        .input_box input {
            float: left;
            width: 348px;
            height: 40px;
            font-size: 14px;
            border: solid 1px #ddd;
            border-radius: 5px;
            text-indent: 10px;
            outline: none;
            line-height: 40px;
        }

        .input_box button {
            width: 350px;
            height: 48px;
            background: #008386;
            border: none;
            border-radius: 5px;
            outline: none;
            cursor: pointer;
            font-size: 16px;
            color: #FFF;
        }

        #error_box {
            height: 40px;
            width: 350px;
            margin: 0 auto;
            line-height: 40px;
            color: #fc4343;
        }
    </style>

    <style>
        body {
            font-size: 18px;
            line-height: 20px;
        }

        label {
            margin: 10px;
        }

        .a-radio {
            display: none;
        }

        .b-radio {
            display: inline-block;
            border: 1px solid #ccc;
            width: 16px;
            height: 16px;
            border-radius: 2px;
            vertical-align: middle;
            margin-right: 5px;
            position: relative;
        }

        .b-radio:before {
            content: '';
            font-size: 0;
            width: 10px;
            height: 10px;
            background: rgb(143, 188, 238);
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -5px;
            margin-top: -5px;
            border-radius: 2px;
            display: none;
        }

        .a-radio:checked ~ .b-radio:before {
            display: block;
        }
    </style>
</head>

<body>
<div layout:fragment="content" th:remove="tag">
    <div id="app">
        <div class="row">
            <div class="col-xs-12">
                <div class="widget-box">
                    <div class="widget-header widget-header-small">
                        <button  class="btn btn-success btn-sm radius" type="button" id="aaa"onclick="openTransferModal1(this)">
                            <i class="fa  fa-plus" ></i>猜大小
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="myModalTransfer1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" style="width: auto">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        余额:<div id="balance"></div><br/>
                        钱包地址：<div id="address"></div>
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="input_box">
                        用户名:<input type="text" placeholder="用户名" id="username" name="username" readonly="readonly"/><br/>
                    </div>
                    <div class="input_box">
                        <label>
                        <input type="radio" name="odds" id="big" class="a-radio" value="big">
                        <span class="b-radio"></span>big
                        </label>

                        <label>
                        <input type="radio" name="odds" id="small" class="a-radio" value="small">
                        <span class="b-radio"></span>small
                        </label>
                        </div>
                    <div class="input_box">
                        金额:<input type="text" placeholder="金额:" id="pay" name="pay"/><br/>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" id="transfer1">
                        下注
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->

    <script>
        $(function () {
            $("#transfer1").click(function () {
// 处理表单验证和交给后台处理的逻辑
                var oError = document.getElementById("error_box");
                var odds=$('input[type=radio][name=odds]:checked').val();
                var username = $("#username").val();
                var pay = $("#pay").val();
                var isNotError = true;
                if (odds == "") {
                    oError.innerHTML = "空 ";
                    isNotError = false;
                    $("#odds").focus();
                    return;
                }
                if (username == "") {
                    oError.innerHTML = "账号为空 ";
                    isNotError = false;
                    $("#username").focus();
                    return;
                }
                if (pay == "") {
                    oError.innerHTML = "转账金额为空 ";
                    isNotError = false;
                    $("#pay").focus();
                    return;
                }
                if (parseFloat(pay)>parseFloat((document.getElementById('balance').innerHTML).toString())||parseFloat(pay)<=0.001){
                    $.messager.alert("提示", '余额不足或下注金额错误');
                    return;
                }
                $.ajax({
                    type: "POST",
                    url:  "/game/transfer",
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify({
                        odds:odds,
                        username: username,
                        pay: pay,
                    }),
                    success: function (data) {
                        switch (data.result.toString()) {
                            case "1": {
                                $.messager.alert("提示", '恭喜你奖励已到账户请等待区块验证，请查看日志');
                                break;
                            }
                                ;
                            case "2": {
                                $.messager.alert("提示", '失败了');
                                break;
                            }
                            case  "3":{
                                $.messager.alert("提示", '下注失败');
                                break;
                            }
                            default: {
                                $.messager.alert("提示", '转账失败');
                                break;
                            }

                        }
                    }
                });

            });


        });
    </script>
    <script th:inline="javascript">

        function openTransferModal1(Obj) {
            $("#myModalTransfer1").modal('show');
            var username=[[${(#session.getAttribute('user')).username}]];
            $("#username").val(username);
            $.ajax({
                type: "POST",
                url: "/manage/reflashMoney",
                dataType: "json",
                contentType: "application/json",
                data: JSON.stringify({
                    username: username
                }),
                success: function (data) {
                    switch (data.result.toString()) {
                        case "1": {
                            $("#balance").text(data.balance.toString());
                            $("#address").text(data.address.toString());
                            break;
                        }
                            ;
                        case "2": {
                            $.messager.alert("提示", '余额不足或下注金额错误');
                            break;
                        }
                        case "0": {
                            $.messager.alert("提示", '下注失败');
                            break;
                        }

                    }
                }
            });
            // 显示模态框
        };
    </script>
</div>


</body>
</html>